{% extends 'master.jinja2' %}
{% block breadcurmb %}{% endblock %}
{% block main %}
<div class="container">
    <div class="row" style="margin-bottom: 20px">
        <div class="col-md-8 col-sm-8 col-lg-8">
            <!--广告-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom: 20px;">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="{{request.static_url('myproject:static/uploads/20160805/20160805173424190.jpg')}}" alt="买一箱送一箱，蒙牛热卖牛奶" width="100%">
                        <div class="carousel-caption">
                            买一箱送一箱，蒙牛热卖牛奶
                        </div>
                    </div>
                    <div class="item">
                        <img src="{{request.static_url('myproject:static/uploads/20160802/20160802155645220.jpg')}}" alt="七夕节怎么过" width="100%">
                        <div class="carousel-caption">
                            七夕节怎么过
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <!--推荐商品-->
            <div class="panel panel-primary">
                <div class="panel-heading">推荐商品</div>
                <div class="panel-body">
                    {% if items %}
                        {% for item in items -%}
                        <div class="col-sm-4 col-md-4">
                        <div class="thumbnail" style="border: 0">
                            <img src="{{request.static_url('myproject:static/uploads/20160801/20160801175305728.jpg')}}" alt="{{item.name}}" class="thumbnail">
                            <div class="caption">
                                <ul class="nav nav-pills nav-stacked">
                                    <li>
                                         <p class="text-center">
                                            <a href="{{request.route_url('item',id=item.id)}}">{{item.name}}</a></p>
                                    </li>
                                    <li>
                                        <p class="text-center">
                                        <strong class="text-danger">￥{{item.price}}</strong>
                                        </p>
                                    </li>
                                    <li>
                                        <p style="text-align: center">
                                            <span class="text-danger">销售({{item.num}})</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p style="text-align: center">
                                            <a href="{{request.route_url('item',id=item.id)}}" class="btn btn-info good">购买</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        {%- endfor %}
                    {% endif %}
                </div>
            </div>
            <!--商品分类-->
            <div class="panel panel-success">
                <div class="panel-heading">商品分类</div>
                <div class="panel-body">
                    {% if categories %}
                    <table class="table table-striped home_table_list">
                        <tbody>
                        {% for category in categories -%}
                            <tr>
                                <td width="80">
                                    <b>{{category.name}}</b>
                                </td>
                                <td>
                                    {% if category.children %}
                                    <ul style="list-style: none">
                                        {% for cat_value in category.children -%}
                                        <li class="pull-left" style="margin-right: 10px"><a href="{{request.route_url('category',id=cat_value.id)}}">{{cat_value.name}}</a></li>
                                        {%- endfor %}
                                    </ul>
                                    {% endif %}
                                </td>
                            </tr>
                        {%- endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-4 col-sm-4 col-lg-4">
            <!--商场公告-->
            <div class="panel panel-default">
                <div class="panel-heading">商场公告</div>
                {% if annoncements %}
                <ul class="list-group">
                    {% for annoncement in annoncements -%}
                        <li class="list-group-item">{{annoncement.name}}</li>
                    {%- endfor %}
                </ul>
                {% endif %}
            </div>
            <!--销售排行-->
            <div class="panel panel-info">
                <div class="panel-heading">销售排行</div>
                <div class="panel-body">
                    {{ panel('item_bill') }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}